बूटस्ट्रैप सीएसएस अभी भी श * टी है लेकिन हम इसे बेहतर बना सकते हैं

बूटस्ट्रैप उन लोगों के लिए एक अद्भुत सीएसएस ढांचा है जो डिजाइन, सीएसएस के साथ संघर्ष करते हैं, या जल्दी से कुछ बनाने की जरूरत है।

लेकिन दस्तावेज़ से कॉपी और पेस्ट करने वाले बूटस्ट्रैप घटकों में खामियां हैं।

ये खामियां आपके डिजाइनों को रोक रही हैं!

यहां उन कमियों को ठीक करने और बूटस्ट्रैप को बेहतर बनाने के लिए 5 डिज़ाइन युक्तियां दी गई हैं।

1) अलर्ट पर ध्यान दें

उपयोगकर्ता का ध्यान आकर्षित करने के लिए डार्क बॉर्डर और svg आइकन जोड़ें।

Imgur

 <div class="alert alert-primary rounded-0 border-0 border-start border-primary border-4" role="alert"> <p class="fs-6 mb-0 d-flex align-items-center"> <!-- https://heroicons.com/ light-bul--> <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="16" height="16" viewBox="0 0 20 20" fill="currentColor"> <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" /> </svg> <span>A simple primary alert—check it out!</span> </p> </div>

2) टेबल्स का आपके डेटाबेस से मेल नहीं होना चाहिए

HTML तालिकाओं को आपके डेटाबेस संरचना की एक प्रति होने की आवश्यकता नहीं है। कॉलम नाम, आईडी निकालें, और जब यह समझ में आता है तो फ़ील्ड को गठबंधन करें।

Imgur

 <div class="border-0 shadow bg-white rounded"> <h3 class="fs-5 px-3 pt-3">Users</h3> <div class="px-2 pt-2"> <table class="table table-borderless fs-6"> <tbody> <tr> <td>Mark Otto</td> <td class="text-end text-muted">@mdo</td> </tr> <tr class="bg-light rounded-4"> <td>Jacob Thornton</td> <td class="text-end text-muted">@fat</td> </tr> <tr> <td>Larry the Bird</td> <td class="text-end text-muted">@twitter</td> </tr> </tbody> </table> </div> <div class="p-3 bg-light rounded d-flex justify-content-end"> <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons> <buttons class="btn btn-primary">View</buttons> </div> </div>

3) सेकेंडरी बटन को बैकग्राउंड कलर की जरूरत नहीं होती

प्राथमिक क्रियाओं को पृष्ठभूमि का रंग देने और द्वितीयक क्रियाओं को कोई पृष्ठभूमि रंग देने से महत्व की एक विरासत स्थापित नहीं होगी।

Imgur

 <div class="card border-0 shadow p-2"> <div class="card-body"> <h5 class="card-title">Special offer</h5> <p class="card-text">Are you sure you want to cancel your subscription? We have a special offer if you want to stick around!</p> <buttons class="btn btn-primary">View Details</buttons> <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons> </div> </div>

4) सब कुछ लेबल करना बंद करो!

देव मूल्यों को लेबल करना पसंद करते हैं। इसे रोक! जानकारी को इस तरह प्रदर्शित करें जैसे कि वह किसी पुस्तक का एक वाक्य हो, न कि कुंजी मान युग्म।

Imgur

 <div class="card border-0 shadow"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h1 class="card-title fs-5">Rocky Mount, MI</h1> <h2 class="card-title fs-6 text-muted fw-light">100 miles away</h2> <p class="card-text fw-light"><span class="fw-bold">$150</span> night</p> </div> </div>

5) छाया> सीमाएँ

कार्ड बॉर्डर अक्सर भद्दे लगते हैं। छाया तत्वों पर जोर देती है और पृष्ठ को गहराई देती है, जिससे तत्व उपयोगकर्ता के करीब महसूस करता है।

Imgur

 <div class="card border-0 shadow p-2"> <div class="card-body"> <h5 class="card-title fs-5">Collaborate</h5> <p class="card-text"> Share your work with hundreds of like minded individuals around the world! </p> </div> </div>

अधिक बूटस्ट्रैप डिजाइन युक्तियाँ ??

अगर आपको यह पसंद आया, तो मेरे नए प्रोजेक्ट - बेटर बूटस्ट्रैप की जाँच करने पर विचार करें

वहां आपको इस लेख की तरह अधिक बूटस्ट्रैप डिज़ाइन युक्तियों वाली एक निःशुल्क पुस्तक मिलेगी।

️ - वेस